<template>
    <div class="login" :style="{minHeight:clientH}">
        <h1 class="bg_logo"><img :src="logo" alt="点购集团"></h1>
        <section class="login_form">
            <div class="login_item">
                <label><img :src="shouji" alt="手机号"></label>
                <input type="tel" v-model="username" placeholder="请输入手机号码" required autofocus />
                <span class="clean" v-show="username" @click="cleanVal('username')"><img :src="clean" alt="清空"></span>
            </div>
            <div class="login_item">
                <label><img :src="mima" alt="密码"></label>
                <input v-show="!showPassword" type="password" v-model="password" placeholder="请输入登录密码" required />
                <input v-show="showPassword" type="text" v-model="password" placeholder="请输入登录密码" required />
                <span class="clean clean_password" v-show="password" @click="cleanVal('password')"><img :src="clean" alt="清空"></span>
                <span class="show_password" v-show="password" @click="isShowPassword">
                    <img v-show="showPassword" :src="nosee" alt="隐藏">
                    <img v-show="!showPassword" :src="see" alt="显示">
                </span>
            </div>
            <van-button type="primary" round size="large" @click="login">登录</van-button>
        </section>
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import Loading from "@/components/Loading.vue";
import {login,desktopList} from '@/request/api.js'
export default {
    name:'Login',
    components:{Loading},
    data(){
        return{
            clientH:0,
            showLoading:false,
            logo:require('@/assets/images/bg_login.png'),
            shouji:require('@/assets/images/shouji.png'),
            mima:require('@/assets/images/mima.png'),
            clean:require('@/assets/images/clean.png'),
            see:require('@/assets/images/see.png'),
            nosee:require('@/assets/images/nosee.png'),
            username:'',
            password:'',
            warnFlag:false,
            showPassword:false
        }
    },
    created(){
        var h = document.body.clientHeight
        this.clientH = h - 44 + 'px';
        localStorage.clear();
        this.$store.commit('setTabbarActive',0);
        this.$store.commit('setToken','');
        this.$store.commit('setStaffer_id','');
        this.$store.commit('setShowHeader',false);
    },
    methods:{
        //验证用户名与密码
        matchValue(){
            //这里定义校验规则
            // let reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;if(!reg.test(this.username))
            if(!this.username||this.username==''){
                this.$toast('请输入手机号');
            }else if(this.username.length!=11){
                this.$toast('输入手机号有误，请重新输入');
            }else if(!this.password||this.password==''){
                this.$toast('请输入密码');
            }else if(this.password.length<6 || this.password.length>20){
                this.$toast('输入密码有误，请重新输入');
            }else{
                this.warnFlag = true;
            }
        },
        //登录
        login(){
            this.matchValue();
            if(this.warnFlag){
                this.showLoading = true;
                login({username:this.username,password:this.password}).then(res=>{
                    // console.log(res);
                    if (res.code) {
                        this.$toast({
                            message:res.msg,
                            duration:1000
                        })
                    }
                    let token = res.data.accessToken;
                    let staffer_id = res.data.info.staffer_id;
                    let staffer_name = res.data.info.staffer_name;
                    localStorage.setItem('token',token);
                    localStorage.setItem('staffer_id',staffer_id);
                    localStorage.setItem('staffer_name',staffer_name);
                    // localStorage.setItem('showHeader',true);
                    localStorage.setItem('username',this.username);
                    this.$store.commit('setToken',token);
                    this.$store.commit('setStaffer_id',staffer_id);
                    // this.$store.commit('setShowHeader',true);
                    desktopList({token:token}).then(res=>{
                        let data = res.data;
                        localStorage.setItem('menus',JSON.stringify(data.menus))
                        this.showLoading = false;
                        this.$router.push({ path: '/deskTop'});
                    }).catch(error=>{
                        console.log(error)
                        this.showLoading = false;
                    })
                }).catch(err=>{
                    console.log(err);
                    this.showLoading = false;
                })
            }
        },
        //清空输入框数据
        cleanVal(val){
            console.log(val)
            if (val == 'username') {
                this.username = '';
            } else {
                this.password = '';
            }
        },
        //显示隐藏密码
        isShowPassword(){
            this.showPassword = !this.showPassword;
        }
    }
}
</script>
<style lang="less">
.login{
    width: 100%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .bg_logo{
        width: 100%;
        height: 250px;
        img{
            display: block;
            width: 100%;
        }
    }
    .login_form{
        width: 100%;
        height: auto;
        padding: 0 24px;
        box-sizing: border-box;
        .login_item{
            width: 100%;
            padding: 15px 0;
            border-bottom: 1px solid #f7f7f7;
            margin-top: 20px;
            position: relative;
            label{
                display: block;
                width: 20px;
                height: 20px;
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -10px;
                img{
                    display: block;
                    width: 20px;
                    height: 20px;
                }

            }
            .clean{
                display: block;
                width: 20px;
                height: 20px;
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: -10px;
                cursor: pointer;
                img{
                    display: block;
                    width: 20px;
                    height: 20px;
                }
            }
            .show_password{
                display: block;
                width: 20px;
                height: 20px;
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: -10px;
                cursor: pointer;
                img{
                    display: block;
                    width: 20px;
                    height: 20px;
                }
            }
            .clean_password{
                right: 36px;
            }
            input{
                display: block;
                width: 100%;
                box-sizing: border-box;
                padding-left: 34px;
                font-size: 15px;
                color: #232426;
            }
        }
        .van-button--large{
            margin-top: 32px;
            font-size: 16px;
            color: #fff;
            background: #02ccbd;
            box-shadow: 0 4px 20px rgba(2, 204, 189, .3);
        }
    }
    .van-popup--center{background: none !important;}
    /deep/ .van-toast--text{font-size: 15px !important;}
    /deep/ .van-loading__text{font-size: 16px;}
    /deep/ .van-loading__spinner--circular{width: 40px !important;height: 40px !important;}
}
</style>